<!--图片组件-->
<template>
  <component v-if='imgData !== null'>
    <div align='center'>
      <q-card class='content-size'>
        <q-carousel
          swipeable

          v-model="slide"

          infinite
          :fullscreen.sync="fullscreen"
          @mouseenter="autoplay = false"
          @mouseleave="autoplay = true"
          :autoplay="autoplay"
        >
          <q-carousel-slide v-for='(item, index) in imgData.imgs' :name="index+1"  >
            <img crossorigin='anonymous' class="rounded-borders col-6 full-height" :src="imgBase64[index]"  :onload='transform(item,index)'/>
            <ImageMessage  :report-time='imgData.reportDate' :current='index+1' :total='imgData.imgs.length'/>
          </q-carousel-slide>

<!--          <template v-slot:control>-->
<!--            <q-carousel-control-->
<!--              position="top-right"-->
<!--              :offset="[18, 18]"-->
<!--            >-->
<!--              <q-btn-->
<!--                push round dense color="white" text-color="primary"-->
<!--                :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"-->
<!--                @click="fullscreen = !fullscreen"-->
<!--              />-->
<!--            </q-carousel-control>-->
<!--          </template>-->

        </q-carousel>

      </q-card>
    </div>

  </component>
</template>

<script lang='ts'>
import { defineComponent, PropType, ref } from 'vue';
import  ImageMessage from './ImageMessage.vue';
import { ImgsModel } from 'pages/kungfu/model/ReportData';
import { urlToBase64 } from 'pages/kungfu/function/htmlToPdf';

export default defineComponent( {
  name: 'Imgs',
  components: {ImageMessage},
  props: {
    imgData: {
      type: Object as PropType<ImgsModel>
    },
  },
  setup () {
    let imgBase64 = ref<string[]>([]);

    let slide = ref<number>(1);
    let fullscreen = ref<boolean>(false);
    let autoplay = ref<boolean>(true)
    let current = ref<number>(1);
    let total = ref<number>(1);
    let imgs = []
    function transform (url,index) {
      urlToBase64(url).then(res => {
        imgs.push(res)
        imgBase64.value = imgs
      })
    }
    return {
      slide,
      fullscreen,
      autoplay,
      imgBase64,
      transform
    }
  }
});
</script>

<style scoped lang='sass'>
@import url("../style/Style.sass")
.content-size
  padding: 0px


</style>
